<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>柱状图报表</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi"/>
    <link rel="stylesheet" href="${re.contextPath}/plugin/layui/css/layui.css">
    <link rel="stylesheet" href="${re.contextPath}/plugin/lenos/main.css">
    <link rel="stylesheet" href="${re.contextPath}/plugin/bootstrap/css/bootstrap.css"/>
    <#--<link rel="stylesheet" href="${re.contextPath}/plugin/querybuilder/css/query-builder.default.css"/>-->
    <#--<link rel="stylesheet" href="${re.contextPath}/plugin/querybuilder/css/bootstrap-datepicker3.min.css"/>-->
    <!-- querybuider -->
    <link rel="stylesheet" href="${re.contextPath}/plugin/querybuilder/node_modules/bootstrap/dist/css/bootstrap.css" id="bt-theme">
    <link rel="stylesheet" href="${re.contextPath}/plugin/querybuilder/node_modules/bootstrap-select/dist/css/bootstrap-select.css">
    <link rel="stylesheet" href="${re.contextPath}/plugin/querybuilder/node_modules/chosenjs/chosen.css">
    <link rel="stylesheet" href="${re.contextPath}/plugin/querybuilder/node_modules/awesome-bootstrap-checkbox/awesome-bootstrap-checkbox.css">
    <link rel="stylesheet" href="${re.contextPath}/plugin/querybuilder/node_modules/bootstrap-slider/dist/css/bootstrap-slider.css">
    <link rel="stylesheet" href="${re.contextPath}/plugin/querybuilder/node_modules/selectize/dist/css/selectize.bootstrap3.css">
    <link rel="stylesheet" href="${re.contextPath}/plugin/querybuilder/css/query-builder.default.css" id="qb-theme">
    <link rel="stylesheet" href="${re.contextPath}/plugin/querybuilder/css/flags.css">

    <link rel="stylesheet" href="${re.contextPath}/plugin/assets/css/daterangepicker.css"/>
    <link rel="stylesheet" href="${re.contextPath}/plugin/assets/css/components.min.css"/>
    <link rel="stylesheet" href="${re.contextPath}/plugin/assets/css/layout.min.css"/>
    <link rel="stylesheet" href="${re.contextPath}/plugin/assets/css/font-awesome.min.css"/>

    <script type="text/javascript" src="${re.contextPath}/plugin/jquery/jquery-3.2.1.min.js"></script>
    <script type="text/javascript" src="${re.contextPath}/plugin/layui/layui.all.js" charset="utf-8"></script>
    <#--<script type="text/javascript" src="${re.contextPath}/plugin/querybuilder/js/query-builder.standalone.js"></script>-->
    <#--<script type="text/javascript" src="${re.contextPath}/plugin/querybuilder/i18n/query-builder.zh-CN.js"></script>-->
    <#--<script type="text/javascript" src="${re.contextPath}/plugin/querybuilder/js/bootstrap-datepicker.min.js"></script>-->
    <!-- querybuider -->
    <script src="${re.contextPath}/plugin/querybuilder/node_modules/jquery/dist/jquery.js"></script>
    <script src="${re.contextPath}/plugin/querybuilder/node_modules/bootstrap/dist/js/bootstrap.js"></script>
    <script src="${re.contextPath}/plugin/querybuilder/node_modules/bootstrap-select/dist/js/bootstrap-select.js"></script>
    <script src="${re.contextPath}/plugin/querybuilder/node_modules/chosenjs/chosen.jquery.js"></script>
    <script src="${re.contextPath}/plugin/querybuilder/node_modules/bootbox/bootbox.js"></script>
    <script src="${re.contextPath}/plugin/querybuilder/node_modules/bootstrap-slider/dist/bootstrap-slider.js"></script>
    <script src="${re.contextPath}/plugin/querybuilder/node_modules/selectize/dist/js/standalone/selectize.js"></script>
    <script src="${re.contextPath}/plugin/querybuilder/node_modules/jquery-extendext/jQuery.extendext.js"></script>
    <script src="${re.contextPath}/plugin/querybuilder/node_modules/sql-parser-mistic/browser/sql-parser.js"></script>
    <script src="${re.contextPath}/plugin/querybuilder/node_modules/dot/doT.js"></script>
    <script src="${re.contextPath}/plugin/querybuilder/node_modules/interactjs/dist/interact.js"></script>
    <script src="${re.contextPath}/plugin/querybuilder/js/query-builder.js"></script>
    <script src="${re.contextPath}/plugin/querybuilder/i18n/query-builder.zh-CN.js"></script>

    <script type="text/javascript" src="${re.contextPath}/plugin/echarts/echarts.js"></script>
    <script type="text/javascript" src="${re.contextPath}/plugin/projects/utils.js"></script>
    <script type="text/javascript" src="${re.contextPath}/plugin/projects/querybuilder.js"></script>
    <script type="text/javascript" src="${re.contextPath}/plugin/projects/tabletools.js"></script>
    <style type="text/css">
        .layui-table-tool{
            z-index: 0!important;
        }
    </style>
</head>

<body>
<div class="lenos-search" style="height: auto;overflow: inherit; padding: inherit; border-bottom: inherit;">
    <div class="select">
        <input hidden="hidden" value="${reportConfig.id}" id="reportId">
        <fieldset class="layui-elem-field" style="height: auto;">
            <legend>过滤器</legend>
            <div class="layui-row" style="margin-top: 5px;">
                <div class="page-toolbar">
                    <div id="dashboard-report-range" class="layui-btn layui-btn-normal" data-container="body" data-placement="bottom" data-original-title="Change dashboard date range">
                        <i class="icon-calendar"></i>&nbsp;
                        <span class="thin uppercase hidden-xs"></span>&nbsp;
                        <i class="fa fa-angle-down"></i>
                    </div>
                </div>
            </div>
            <div class="layui-field-box">
                <div class="layui-row">
                    <div class="layui-col-md12" id="builder_div" style="height: auto;"></div>
                </div>
            </div>
            <button id="search" class="select-on layui-btn layui-btn-sm" data-type="select"><i class="layui-icon"></i>
            </button>
        </fieldset>
    </div>
</div>
<table id="report" class="layui-hide" lay-filter="reportConfig"></table>


<script>
    var pageData = {
        reportId: null,
        dsl: null,
        queryBuilderObj: null,
        plugin_config: {
            format: 'yyyy-mm-dd',
            todayBtn: 'linked',
            todayHighlight: true,
            autoclose: true
        },
        cols: null
    };

    var form = layui.form;
    form.render();
    var table = layui.table;
    dictionary('${re.contextPath}', 'event');
    initBuilder('${re.contextPath}');
    var reportId = $("#reportId").val();
    getReportConfigById('${re.contextPath}', reportId);
    var dsl = window.dsl;
    $('#builder').queryBuilder('setRulesFromSQL', dsl);

    function getTableData() {
        var dsl = getQueryBuilderDsls();
        if(dsl == null){
            return ;
        }
        var json_sql_where = JSON.parse(dsl);
        var sql_where = json_sql_where.sql;
        var dateRange = window.dateranger;
        getTableCols('${re.contextPath}');
        table.render({
            elem: '#report'
            , cols: [pageData.cols]
            , loading: true
            , limits: [1000,5000]
            , limit:1000
            , toolbar: "#toolbar"
            , defaultToolbar: ['filter', 'print', 'exports']
            , page: true
            ,totalRow: true
            , data: null
        });
        var reportId = $("#reportId").val();
        $.ajax({
            type: "POST",
            url: "${re.contextPath}/showReport/getTableData",
            data: {
                reportId: reportId,
                dsl: sql_where,
                dateRange: dateRange
            },
            async: true,
            success: function (result) {
                //方法级渲染
                table.render({
                    elem: '#report'
                    , cols: [pageData.cols]
                    , loading: true
                    , limits: [1000,5000]
                    , limit:1000
                    , toolbar: "#toolbar"
                    , defaultToolbar: ['filter', 'print', 'exports']
                    , page: true
                    ,totalRow: true
                    , data: result.data
                });
            }
        });
    }

    $(function () {
        datarangerinit($('#dashboard-report-range'), $('#dashboard-report-range span'));
        showChartMeasure('${re.contextPath}');
        getTableData();

        $("#search").click(function () {
            getTableData();
        });

    });
</script>

<script type="text/javascript" src="${re.contextPath}/plugin/assets/js/jquery.min.js"></script>
<script type="text/javascript" src="${re.contextPath}/plugin/assets/js/bootstrap.min.js"></script>
<script type="text/javascript" src="${re.contextPath}/plugin/assets/js/moment.min.js"></script>
<script type="text/javascript" src="${re.contextPath}/plugin/assets/js/daterangepicker.js"></script>
<script type="text/javascript" src="${re.contextPath}/plugin/assets/js/morris.min.js"></script>
<script type="text/javascript" src="${re.contextPath}/plugin/assets/js/app.min.js"></script>
<script type="text/javascript" src="${re.contextPath}/plugin/assets/js/dashboard.min.js"></script>
<script type="text/javascript" src="${re.contextPath}/plugin/projects/dateranger.js"></script>
</body>

</html>
